<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>矿机优惠券</title>
    <link rel="stylesheet" href="../../css/reset.css" />
    <style>
        body {
            width: 100%;
            background-color: #F8F8F8;
            font-family: Helvetica;
            color: #333333;
            font-size: 0.28rem;
            font-family: PingFang SC;
        }

        .outBox {
            width: 100%;
            height: auto;
        }

        /* 可使用优惠券列表 */
        .couponListBox,
        .usedCouponBox,
        .overDateBox {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        .couponListBox>li,
        .usedCouponBox>li,
        .overDateBox>li {
            width: 6.9rem;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            background-color: #fff;
            border-radius: 0.1rem;
            overflow: hidden;
            margin-top: 0.2rem;
            box-shadow: 1px 0.1rem 0.13rem 0px rgba(241, 241, 241, 0.42);
        }

        .bgImgcontant {
            width: 100%;
            height: 1.58rem;
            background: url("../../image/youhuiquanbeijign.png") no-repeat center;
            background-size: 100% 100%;
        }

        .bgImgcontant ul {
            width: 100%;
            height: auto;
            padding: 0.14rem 0.26rem 0 0.26rem;
            box-sizing: border-box;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
        }

        .bgImgcontant li {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.22rem;
        }

        .bgImgcontant li:first-of-type {
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
        }

        .bgImgcontant li:first-of-type p:last-of-type {
            font-size: 0.4rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(246, 116, 18, 1);
        }

        .bgImgcontant li:first-of-type p:last-of-type span {
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(246, 116, 18, 1);
        }

        .couponUseText {
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }

        .couponUseText>img {
            width: 1.14rem;
            margin-left: 0.1rem;
        }

        .bgImgcontant li:not(:last-of-type) p:last-of-type {
            color: #F67311;
        }

        .bgImgcontant li:nth-of-type(2) {
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(154, 154, 154, 1);
        }

        .bgImgcontant li:last-of-type {
            font-size: 0.2rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(154, 154, 154, 1);
            margin-top: 0.05rem;
        }

        .couponBottom {
            width: 100%;
            height: auto;
            background-color: #fff;
            border-radius: 0 0 0.1rem 0.1rem;
            padding: 0 0.26rem;
            box-sizing: border-box;
            overflow: hidden;
        }

        .couponBottom>div:first-of-type {
            width: 100%;
            height: 0.68rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(154, 154, 154, 1);
        }

        .couponBottom>div:first-of-type img {
            width: 0.11rem;
            margin-left: 0.1rem;
        }

        .couponBottom>div:first-of-type button {
            width: 1.4rem;
            height: 0.4rem;
            background: rgba(246, 116, 18, 1);
            border-radius: 0.08rem;
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            outline: none;
            border: none;
        }

        .couponUseDetail {
            width: 100%;
            height: auto;
            margin-bottom: 0.1rem;
        }

        .couponUseDetail ul {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            padding: 0 0.26rem;
            box-sizing: border-box;
        }

        .couponUseDetail ul>li {
            list-style-type: disc;
            width: 100%;
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(90, 90, 90, 1);
            margin-bottom: 0.1rem;
        }

        /* 已使用优惠券列表和已过期共用 */
        .usedUpbgcontant {
            width: 100%;
            height: 1.58rem;
            background: url("../../image/youhuiquanbeijign.png") no-repeat center;
            background-size: 100% 100%;
            color: rgba(212, 210, 212, 1);
        }

        .usedUpbgcontant ul {
            width: 100%;
            height: auto;
            padding: 0.14rem 0.26rem 0 0.26rem;
            box-sizing: border-box;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
        }

        .usedUpbgcontant li {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.22rem;
        }

        .usedUpbgcontant li:first-of-type {
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 500;
        }

        .usedUpbgcontant li:first-of-type p:last-of-type {
            font-size: 0.4rem;
            font-family: PingFang SC;
            font-weight: bold;
        }

        .usedUpbgcontant li:first-of-type p:last-of-type span {
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
        }

        .usedCouponUseText {
            display: flex;
            display: -webkit-flex;
            align-items: center;
        }

        .usedUpbgcontant li:nth-of-type(2) {
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 500;
        }

        .usedUpbgcontant li:last-of-type {
            font-size: 0.2rem;
            font-family: PingFang SC;
            font-weight: 400;
            margin-top: 0.05rem;
        }

        .usedCouponBottom {
            width: 100%;
            height: auto;
            background-color: #fff;
            border-radius: 0 0 0.1rem 0.1rem;
            padding: 0 0.26rem;
            box-sizing: border-box;
        }

        .usedCouponBottom>div {
            width: 100%;
            height: 0.68rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(212, 210, 212, 1);
            position: relative;
        }

        .usedCouponBottom>div img {
            width: 0.11rem;
            margin-left: 0.1rem;
        }

        .usedCouponBottom .usedCouponImg {
            position: absolute;
            width: 0.94rem;
            right: 0;
            bottom: 0.2rem;
            z-index: 100;
        }

        .rotatedeg {
            transform: rotate(0);
            -webkit-transform: rotate(0);
            transition: all .1s linear;
            -webkit-transition: all .1s linear;
        }

        .rotate {
            transform: rotate(90deg);
            transition: all .3s linear;
            -webkit-transform: rotate(90deg);
            -webkit-transtion: all .1s linear;
        }
    </style>
</head>

<body>
    <div class="outBox" style="padding-bottom: 0.4rem;">
        <!--**************** 可使用优惠券列表************** -->
        <div class="useCouponList">
            <ul class="couponListBox">
                <!-- <li>
                    <div class="bgImgcontant">
                        <ul>
                            <li>
                                <p class="couponUseText">
                                    邀请好友注册券 <img src="../../image/jijiangdaoqix.png" alt="">
                                </p>
                                <p>
                                    100 <span>CNY</span>
                                </p>
                            </li>
                            <li>
                                <p>
                                    有效期至 2020.06.20 23:59
                                </p>
                                <p>
                                    满XX可用
                                </p>
                            </li>
                            <li>
                                <p>

                                </p>
                                <p>
                                    XX USDT,满XX可用
                                </p>
                            </li>
                        </ul>
                    </div>
                    <div class="couponBottom">
                        <div>
                            <p>
                                使用规则
                                <img src="../../image/iconouix.png" alt="">
                            </p>
                            <button>
                                立即使用
                            </button>
                        </div>
                        <ul class="couponUseDetail">
                            <li>
                                限购买加速收益BTC算力，IPFS矿机使用；
                            </li>
                            <li>
                                限有效期内使用，过期失效;
                            </li>
                            <li>
                                优惠券可叠加使用;
                            </li>
                            <li>
                                具体折扣金额，以购买矿机为准；
                            </li>
                        </ul>
                    </div>
                </li> -->
            </ul>
        </div>
        <!--***** 已使用优惠券列表和已过期共用******* -->
        <div class="usedCouponList" style="display: none;">
            <ul class="usedCouponBox">
                <!-- <li>
                    <div class="usedUpbgcontant">
                        <ul>
                            <li>
                                <p class="usedCouponUseText">
                                    邀请好友注册券
                                </p>
                                <p>
                                    100 <span>CNY</span>
                                </p>
                            </li>
                            <li>
                                <p>
                                    有效期至 2020.06.20 23:59
                                </p>
                                <p>
                                    满XX可用
                                </p>
                            </li>
                            <li>
                                <p>

                                </p>
                                <p>
                                    XX USDT,满XX可用
                                </p>
                            </li>
                        </ul>
                    </div>
                    <div class="usedCouponBottom">
                        <div>
                            <p>
                                使用规则
                                <img src="../../image/iconouix.png">
                            </p>
                            <img src="../../image/yishiyongx.png" class="usedCouponImg">
                            <img src="../../image/yiguoqix.png" class="usedCouponImg">
                        </div>
                    </div>
                </li> -->
            </ul>
        </div>
        <div id="listState" style="text-align: center;margin: auto;color: #666666;margin-top:30%;display: none;">
            <img src="../../image/nocoupon.png" style="width: 2.08rem;">
            <p
                style="font-size:0.3rem;font-family:PingFang SC;font-weight:400;color:rgba(138,138,138,1);margin-top: 0.2rem;">
                暂无优惠券~
            </p>
        </div>
    </div>
</body>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/dotmin.js"></script>
<script src="../../script/app.js"></script>
<script>
    apiready = function () {
        var app = new APP();
        var account = app.getAccount();
        var curpage = 1;//当前页
        var totalPage = 0;//总页数
        var headerChoose = "canUse";//canUse 可使用优惠券 contUsed 已使用优惠券 overData 已过期
        //可用优惠券列表
        function couponList(account, page, isdown) {
            app.ajaxPro({
                url: "coupon/list",
                values: {
                    token: account.token,
                    currencyCode: "",
                    status: 1,//  （1未使用 2已使用 3已过期）不传 查所有
                    page: page
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    var dataList = ret.data.lists;
                    totalPage = ret.data.totalPage;
                    var temp = doT.template($("#couponListLi").text());
                    if (isdown) {
                        $(".couponListBox").html(temp(dataList));
                    } else {
                        $(".couponListBox").append(temp(dataList));
                    }
                    if (page == 1 && dataList.length == 0) {
                        $("#listState").show();
                    } else {
                        $("#listState").hide();
                    }
                } else {
                    app.toast(ret.message)
                }
            })
        }
        couponList(account, curpage, true);
        //已使用优惠券列表
        function usedCouponList(page, account, type, isdown) {
            app.ajaxPro({
                url: "coupon/list",
                values: {
                    token: account.token,
                    currencyCode: "",
                    status: type,//  （1未使用 2已使用 3已过期）不传 查所有
                    page: page
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    var dataListNew = ret.data.lists;
                    totalPage = ret.data.totalPage;
                    var temp = doT.template($("#usedCouponLi").text());
                    if (isdown) {
                        $(".usedCouponBox").html(temp(dataListNew));
                    } else {
                        $(".usedCouponBox").append(temp(dataListNew));
                    }
                    if (page == 1 && dataListNew.length == 0) {
                        $("#listState").show();
                    } else {
                        $("#listState").hide();
                    }
                } else {
                    app.toast(ret.message);
                }
            });

        }
        //监听头部选择
        app.listen("couponHeader", function (ret) {
            curpage = 1; totalPage = 0;
            $(".couponListBox,.usedCouponBox").empty();
            headerChoose = ret.value;
            if (headerChoose == "canUse") {
                $(".useCouponList").show();
            } else {
                $(".usedCouponList").show();
            }
            if (headerChoose == "canUse") {
                couponList(account, curpage, true);
            } else if (headerChoose == "contUsed") {
                usedCouponList(curpage, account, 2, true);
            } else {
                usedCouponList(curpage, account, 3, true);
            }
        });
        //下拉刷新
        app.downRefresh(function () {
            curpage = 1;
            totalPage = 0;
            $(".couponListBox,.usedCouponBox").empty();
            if (headerChoose == "canUse") {
                couponList(account, curpage, true);
            } else if (headerChoose == "contUsed") {
                usedCouponList(curpage, account, 2, true)
            } else {
                usedCouponList(curpage, account, 3, true);
            }
        });
        // 监听滚动到底部 加载更多
        app.toBottom(function () {
            if (curpage < totalPage) {
                curpage++;
                if (headerChoose == "canUse") {
                    couponList(account, curpage, false);
                } else if (headerChoose == "contUsed") {
                    usedCouponList(curpage, account, 2, false)
                } else {
                    usedCouponList(curpage, account, 3, false);
                }
            }
        });
        $(".couponListBox").on("click", "li .showRules", function () {
            var calssName = $(this).attr("data-name");
            if ($(this).find("img").hasClass("rotate")) {
                $(this).find("img").removeClass("rotate").addClass("rotatedeg");
            } else {
                $(this).find("img").removeClass("rotatedeg").addClass("rotate");
            }
            $("." + calssName).slideToggle(100);
        })
        var couponDetal = {
            coupon_id: "",
            currency: "",
            amount: ""
        }
        $(".couponListBox").on("click", "li .chooseMoneyNum", function () {
            var thisType = $(this).attr("data-type");
            if (thisType == 1) {
                app.trigger("go_machineList");
                setTimeout(function () {
                    app.closeW();
                }, 1500);
            } else {
                couponDetal.coupon_id = $(this).attr("data-id");
                couponDetal.currency = "CNY";
                couponDetal.amount = $(this).attr("data-amontcny");
                var param = {
                    dtype: "dialog79",
                    data: {
                        tips: "确认使用现金券充值到余额么？",
                        tipsText: "*充值成功后可在【我的资产】中查看"
                    }
                };
                app.dialog(param);
            }
        });
        app.listen("dalogSrueText", function () {
            app.ajaxPro({
                url: "coupon/use",
                values: {
                    token: account.token,
                    currency: couponDetal.currency,
                    amount: couponDetal.amount,
                    coupon_id: couponDetal.coupon_id
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    app.toast("使用成功");
                    setTimeout(function () {
                        app.closeW();
                    }, 1500);
                } else {
                    app.toast(ret.message);
                }
            })
        })
    }
</script>
<!-- 可使用优惠券列表 -->
<script type="text/html" id="couponListLi">
    {{~it:it:index}}
        <li>
            <div class="bgImgcontant">
                <ul>
                    <li>
                        <p class="couponUseText" >
                            {{=it.couponName}} 
                            {{?it.expire==1}}
                                <img src="../../image/jijiangdaoqix.png" alt="">
                            {{?}}
                        </p>
                        <p>
                            {{=it.confMap.CNY.dis}} <span>CNY</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            有效期至 {{=it.expiryTime}}
                        </p>
                        <p>
                            {{?it.type==1}}
                                满{{=it.confMap.CNY.cond}}可用
                            {{?}}
                        </p>
                    </li>
                    <li>
                        <p>
                            {{?it.type==1}}
                            <!-- 优惠券 -->
                                <img src="../../image/dikouquanx.png" style="width:0.82rem">
                            {{??}}
                                <img src="../../image/xianjinquanx.png" style="width:0.82rem">
                            {{?}}
                        </p>
                        <p>
                            {{?it.confMap.USDT && it.type ==1}}
                                {{=it.confMap.USDT.dis}} USDT,满{{=it.confMap.USDT.cond}}可用
                            {{?}}
                        </p>
                    </li>
                </ul>
            </div>
            <div class="couponBottom">
                <div>
                    <p class="showRules" data-name="couponUseDetail{{=index}}">
                        使用规则
                        <img src="../../image/iconouix.png" alt="">
                    </p>
                    <button class="chooseMoneyNum" data-id={{=it.id}} data-amontcny={{=it.confMap.CNY.dis}}  data-amontusdt={{=it.confMap.USDT?it.confMap.USDT.dis:0}} data-type={{=it.type}} >
                        立即使用
                    </button>
                </div>
                <div class="couponUseDetail couponUseDetail{{=index}}" style="display:none;">
                    {{=it.ruleDesc}}
                </div>
            </div>
        </li>
    {{~}}
</script>
<!-- 过期和已使用 -->
<script type="text/html" id="usedCouponLi">
    {{~it:it:index}}
        <li>
            <div class="usedUpbgcontant">
                <ul>
                    <li>
                        <p class="usedCouponUseText">
                            {{=it.couponName}}
                        </p>
                        <p>
                            {{=it.confMap.CNY.dis}} <span>CNY</span>
                        </p>
                    </li>
                    <li>
                        <p>
                            有效期至 {{=it.expiryTime}}
                        </p>
                        <p>
                            {{?it.type==1}}
                                满{{=it.confMap.CNY.cond}}可用
                            {{?}}
                        </p>
                    </li>
                    <li>
                        <p>
                            {{?it.type==1}}
                                <img src="../../image/dikouquanximg.png" style="width:0.82rem">
                            {{??}}
                                <img src="../../image/xianjinquanximg.png" style="width:0.82rem">
                            {{?}}
                        </p>
                        <p>
                            {{?it.confMap.USDT && it.type==1}}
                                {{=it.confMap.USDT.dis}} USDT,满{{=it.confMap.USDT.cond}}可用
                            {{?}}
                        </p>
                    </li>
                </ul>
            </div>
            <div class="usedCouponBottom">
                <div>
                    <p>
                        使用规则
                        <img src="../../image/iconouix.png">
                    </p>
                    {{?it.status==2}}
                        <img src="../../image/yishiyongx.png" class="usedCouponImg">
                    {{?}}
                    {{?it.status==3}}
                        <img src="../../image/yiguoqix.png" class="usedCouponImg">
                    {{?}}
                </div>
            </div>
        </li>
    {{~}}
</script>

</html>